import React from 'react'
import ReactDOM from 'react-dom'
export default function HookDemo() {
  const [count, setCount] = React.useState(0)
  const add = () => {
    setCount(count+1)
  }
  const showInput = () => {
    console.log(myRef.current.value);
  }
  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count+1)
    }, 1000)
    // 返回一个函数相当于componentWillUnmount
    return () => {
      console.log('???');
      clearInterval(timer)
    }
    // 谁也不监测 相当于componentDidMount
    // eslint-disable-next-line
  }, [])
  const unmount = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  const myRef = React.useRef()
  return (
    <div>
      <input type="text" ref={myRef}/>
      <h1>当前求和为{count}</h1>
      <button onClick={add}>点击+1</button>
      <button onClick={unmount}>卸载组件</button>
      <button onClick={showInput}>提示数据</button>
    </div>
  )
}

